	body{
	    background: url(../images/bg.jpg) no-repeat center center fixed;
	    background-size: cover;
	}
	html,body{
		width:100%;
	    height:100%;
	}
	@keyframes rotate{
		100%{
			transform: rotate(306deg);
		}
	}
	#wrapper{
	    width:6.7rem;
	    height:100%;
	    padding: 0 0.4rem;
	    position: relative;
	    background: rgba(0,0,0,.6);
	    /*剪切掉超出容器的模糊效果*/
	    overflow: hidden;  
	}
	#wrapper::after{
	    /*设置伪元素的z-index值为负值，是为了不会影响父容器中的文字*/
	    z-index: -1;
	    position: absolute;
	    content:"";
	    /*让伪元素的宽高撑满父元素的整个区域*/
	    top:0;
	    bottom:0;
	    left:0;
	    right:0;
	    /*使blur()处理模糊的图片与背景图片相同*/
	    background: url(../images/bg.jpg) no-repeat center center fixed;
	    background-size: cover;
	    /*对伪元素进行blur处理，不会影响到父元素中的文字效果，值越大，模糊效果越明显*/
	/*            filter:blur(20px); */
	    -webkit-filter:blur(20px);
	    /*消除边缘的模糊效果消退的问题*/
	    margin: -100px;     
	}
	#wrapper .header{
		width: 6.7rem;
		height: 0.6rem;
		font-size: 0.3rem;
		color: #FFFFFF;
		line-height: 0.6rem;
		
		/*overflow: hidden;*/
	}
	#wrapper .header i,#wrapper .header span{
		float: left;	
	}
	#wrapper .header span{
		width: 5.8rem;
		text-align: center;
	}
	#wrapper .header #list:after{
		content: "\e601";
	}
	#wrapper .header #more{
		float: right;
	}
	#wrapper .header #more:after{
		content: "\e600";
	}
	#wrapper .main{
		width: 100%;
		height: 83%;
		font-size: 0.22rem;
		text-align: center;
	}
	#wrapper .main h3{
		width: 100%;
		height: 0.5rem;
		color: #FFFFFF;
		text-align: center;
		font-size: 0.2rem;
		line-height: 0.5rem;
	}	
	#wrapper .main h3 i{
		position: relative;
		font-style: normal;
	}
	#wrapper .main h3 i:after{
		content: "";
		width: 0.28rem;
		border-top: 1px solid #B2B1B1;
		position: absolute;
		top: 0.12rem;
		left: -0.47rem;
	}
	#wrapper .main h3 i:before{
		content: "";
		width: 0.28rem;
		border-top: 1px solid #B2B1B1;
		position: absolute;
		top: 0.12rem;
		right: -0.47rem;
	}
	#wrapper .main .style{
		width: 100%;
		height: 0.66rem;
		text-align: center;
		color: #2FB072;
		/*line-height: 0.66rem;*/
		overflow: hidden;
	}
	#wrapper .main .style li{
		border: 0.01rem solid #2FB072;
		border-radius: 10%;
		/*float: left;*/
		display: inline-block;
		padding: 0.03rem 0.1rem;
		margin: 0.16rem 0.1rem;
	}
	#wrapper .main .style li:first-child i:after{
		content:"\e604" ;
		font-size: 0.2rem;
	}
	#wrapper .main #disc{
		width: 6.25rem;
		height: 6.25rem;
		border-radius: 50%;
		margin: 0.2rem 0 0 0.2rem;
		background: url(../images/bg.jpg) no-repeat center center;
		background-size: cover;
		border: 10px solid #4A4440;
		animation:rotate 6s linear infinite;
		animation-play-state:paused;
		
	}
	#wrapper .main .audio{
		width: 100%;
		height: 3rem;
		text-align: center;
	}
	#wrapper .main .audio .process{
		width: 100%;
		height: 0.38rem;
		margin-top: 1rem;
		color: #B0AFB0;
		line-height: 0.1rem;
	}
	#wrapper .main .audio .process #processbar{
		width: 5.12rem;
		height: 0.05rem;
		border-top: 0.05rem solid #959495;
		margin: 0 0.5rem;
		float: left;
		position: relative;
	}
	#wrapper .main .audio .process #processbar #played{
		width: 0;
		height: 0.05rem;
		background: #31C27B;
		position: absolute;
		left: 0;
		top: -0.05rem;
	}
	#wrapper .main .audio .process #processbar #ball{
		width: 0.3rem;
		height: 0.3rem;
		border-radius:50%;
		background: #31C27B;
		position: absolute;
		left: 0;
		top: -0.15rem;
		
	}
	#wrapper .main .audio .process span{
		width: 0.54rem;
		height: 0.2rem;
		line-height: 0.2rem;
		float: left;
		overflow: hidden;
	}
	#wrapper .main .audio .process span:nth-of-type(2){
		float: right;
	}
	#wrapper .main .audio .play{
		width: 100%;
		height: 1.1rem;
		display: flex;
		justify-content: center;
	}
	
	#wrapper .main .audio .play li:nth-of-type(1):after,#wrapper .main .audio .play li:nth-of-type(3):after{
		content: "\e60a";
		width: 0.7rem;
		height: 0.7rem;
		font-size: 0.24rem;
		text-align: center;
		line-height: 0.7rem;
		color: #2FC77E;
		border: 0.03rem solid #2FC77E;
		border-radius: 50%;		
		float: left;
		margin-top: 0.2rem;
	}
	#wrapper .main .audio .play li:nth-of-type(3):after{
		content: "\e60c";
	}
	#wrapper .main .audio .play li:nth-of-type(2):after{
		content: "\e603";
		width: 1.1rem;
		height: 1.1rem;
		font-size: 0.45rem;
		text-align: center;
		line-height: 1.1rem;
		color: #2FC77E;
		border: 0.03rem solid #2FC77E;
		border-radius: 50%;		
		float: left;
		margin: 0 0.8rem;
	}
	#wrapper .footer{
		width: 100%;
		height: 1.1rem;
		
	}
	#wrapper .footer ul{
		width: 100%;
		height: 1.1rem;
		line-height: 1.1rem;
		
	}
	#wrapper .footer ul li{
		float: left;
		width: 1.30rem;
		height: 1.1rem;
		position: relative;
		color: #9A9A9A;
		font-size: 0.45rem;
		text-align: center;
	}
	#wrapper .footer ul li:nth-of-type(1):after{
		content: "\e609";
	}
	#wrapper .footer ul li:nth-of-type(2):after{
		content: "\e606";
	}
	#wrapper .footer ul li:nth-of-type(3):after{
		content: "\e605";
	}
	#wrapper .footer ul li:nth-of-type(4):after{
		content: "\e602";
		
	}
	#wrapper .footer ul li:nth-of-type(5):after{
		content: "\e607";
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
